<template>
  <div>
    <el-button @click="showSl">显示</el-button>
    <Transition
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @leave="onLeave"
      :css="false"
    >
      <div v-show="show" class="shenlong">神龙</div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import gsap from "gsap";
let show = ref(true);
const showSl = () => {
  show.value = !show.value;
};
const onBeforeEnter = (el: gsap.TweenTarget) => {
  gsap.set(el, {
    scaleX: 0.25,
    scaleY: 0.25,
    x: 100,
    opacity: 1,
  });
};

const onEnter = (el: gsap.TweenTarget, done: any) => {
  gsap.to(el, {
    duration: 1,
    scaleX: 1,
    scaleY: 1,
    opacity: 1,
    x: 100,
    ease: "elastic.inOut(2.5, 1)",
    onComplete: done,
  });
};
const onLeave = (el: gsap.TweenTarget, done: any) => {
  gsap.to(el, {
    duration: 0.7,
    scaleX: 1,
    scaleY: 1,
    x: 300,
    ease: "elastic.inOut(2.5, 1)",
  });
  gsap.to(el, {
    duration: 0.2,
    delay: 0.5,
    opacity: 0,
    x:200,
    onComplete: done,
  });
};
//
</script>

<style scoped>
.shenlong {
  background: #42b883;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>
